<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Donation for jQuery.Timeline</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Bootstrap 4.1.3 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- Font Awesome latest 5.3.1 -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <style>
    input.form-control::-webkit-input-placeholder { color: #ccc; }
    input.form-control:-moz-placeholder { color: #ccc; }
    input.form-control::-moz-placeholder { color: #ccc; }
    input.form-control:-ms-input-placeholder { color: #ccc; }
    input.form-control::placeholder-shown { color: #ccc; }
  </style>
</head>
<body>
<div class="container-fluid">

  <div class="row">
    
    <div class="col-12">
      
      <h3 style="margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: dotted 1px #DDD;">Contribution for jQuery.Timeline</h3>
      
      <p class="lead">We are grateful for your contribution by donation.</p>
      
      <form class="form-inline">
        <div class="form-group">
          <label for="donate-amount" class="mr-sm-3">Amount</label>
          <div class="input-group mb-1 mr-sm-1">
            <div class="input-group-prepend">
              <div class="input-group-text">$</div>
            </div>
            <input type="text" class="form-control" id="donate-amount" name="donate-amount" value="" placeholder="1.00" style="width: 5rem; text-align: right;" />
            <div class="input-group-append">
              <div class="input-group-text">USD</div>
            </div>
          </div>
          <div class="mb-1 ml-sm-2">
            <div id="paypal-button"></div>
          </div>
        </div>
      </form>
      
    </div><!-- .col-12 -->
    
    <div class="col-12" style="margin-top: 4rem;">
      <a href="https://github.com/ka215/jquery.timeline"><i class="fab fa-github-alt"></i> Go Back</a>
    </div>
    
  </div>
  
  <footer class="fixed-bottom">
    
    <div class="col-12 text-center">
      <hr />
      <p class="h6">&copy; 2018 ka2@magicmethods (<a href="https://ka2.org" target="_blank">https://ka2.org</a>)</p>
    </div>
    
  </footer>

</div>
<div class="modal" id="donate-alert" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="donate-alert-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="donate-alert-text"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- jQuery (latest 3.3.1) -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- Bootstrap 4.1.3 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
$(document).ready(function(){
  function getAmount() {
    var d = document.getElementById('donate-amount'),
          amount = parseFloat( d.value );
    amount = isNaN( amount ) || amount <= 0 ? '1.00' : amount;
    d.value = amount;
    return amount;
  }
  
  //getAmount();
  
  paypal.Button.render({
    // Configure environment
    env: 'production',
    client: {
      sandbox: 'AfJmxfL4iEz7O4TF6hp1fe4d7eYXGsE4ruVLun9q6WM6yU9xQ3LvFiAP6FlFmOUV0RyacB-5W87Hfztn',
      production: 'ATps0pqUAdHunRyvJtTvgnFOyIYXHnSrcgwPlDYyk1hrgUt49YrfIkNa0CYGntELI8NEDvUyqmRlIgo7'
    },
    // Customize button (optional)
    locale: 'en_US',
    style: {
      label:   'paypal',
      size:    'medium',
      shape: 'rect',
      color:  'blue',
      tagline: false
    },

    // Enable Pay Now checkout flow (optional)
    commit: true,

    // Set up a payment
    payment: function(data, actions) {
      return actions.payment.create({
        payment: {
          transactions: [{
            amount: {
              total: getAmount(),
              currency: 'USD'
            },
            description: 'Contribution for jQuery.Timeline'
          }]
        },
        experience: {
          input_fields: {
            no_shipping: 1
          }
        }
      });
    },
    // Execute the payment
    onAuthorize: function(data, actions) {
      return actions.payment.execute().then(function() {
        // Show a confirmation message to the buyer
        //window.alert('Thank you for your contributions!');
        //document.getElementById('donate-alert-title').innerHTML = 'Completed';
        $('#donate-alert-title').text('Completed');
        //document.getElementById('donate-alert-text').innerHTML = 'Thank you for your contributions!';
        $('#donate-alert-text').text('Thank you for your contributions!');
        $('#donate-alert').modal();
      });
    }
  }, '#paypal-button');
  
  
});
</script>
</body>
</html>